<template>
	<view>
		<!-- <MySearch :bgColor="'pink'"></MySearch> -->
		<MySearch @click="toSearch"></MySearch>
		<view class="cate">
			<scroll-view scroll-y="true" class="left_scroll_box" :style="{ height: wh + 'px' }" >
				<view v-for="(item, index) in cateList" :key="item.cat_id" class="left_item" :class="{ active: index === currentId }" @click="changeCate(index)">{{ item.cat_name }}</view>
			</scroll-view>
			<scroll-view v-if="cateList.length !== 0" scroll-y="true" class="right_scroll_box" :style="{ height: wh + 'px' }" :scroll-top="scrollTop">
				<view v-for="(gname, index) in cateList[currentId].children">
					<view class="gname">/{{ gname.cat_name }}/</view>
					<view class="iconList">
						<view class="gicon" v-for="(gicon, index) in gname.children">
							<navigator :url="`/subpkg/goods_list/goods_list?cid=${gicon.cat_id}`"> 
								<view class="gicon_box">
									<image :src="gicon.cat_icon"></image>
									<view class="text">{{ gicon.cat_name }}</view>
								</view>
							</navigator>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			wh: 0,
			cateList: [],
			currentId: 0,
			scrollTop: 0 // 每次切换分页的时候让右侧滚动栏回到顶部
		}
	},
	async onLoad() {
		const { data: res } = await uni.$http.get('/categories')
		if (res.meta.status !== 200) return uni.$total('获取列表数据失败')
		console.log(res)
		this.cateList = res.message
	},
	onReady() {
		// 当前页面第一次dom加载完毕，类似于以前的mounted
		uni.getSystemInfo({
			success: res => {
				console.log(res)
				this.wh = res.windowHeight
			}
		})
	},
	methods: {
		changeCate(index) {
			this.currentId = index
			// 滚动条滚到最上
			// 这个值要么是0，要么是1，反正每次来值都不一样 都不一样就能触发它去更新界面
			this.scrollTop = this.scrollTop == 0 ? 1 : 0
		},
		// 点击子组件触发父组件方法
		toSearch(){
			uni.navigateTo({
				url:'/subpkg/search/search'
			})
		}
	}
	
}
</script>

<style lang="scss" scoped>
.cate {
	display: flex;
	.left_scroll_box {
		width: 200rpx;
		background-color: #f7f7f7;
		.left_item {
			text-align: center;
			line-height: 100rpx;
		}
		.active {
			position: relative;
			background-color: #fff;
			&::before {
				content: '';
				width: 4rpx;
				height: 60rpx;
				background-color: #c00;
				position: absolute;
				left: 0;
				top: 50%;
				// 往上回高度一半
				transform: translateY(-50%);
			}
		}
	}
	.right_scroll_box {
		background-color: #fff;
		flex: 1;
		.gname {
			font-size: 12px;
			font-weight: 700;
			text-align: center;
			margin: 10rpx 15rpx;
			
		}
		.iconList {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.gicon{
				width: 33.33%;
			}
			.gicon_box {
				text-align: center;
				margin-bottom: 20rpx;
				image {
					width: 90rpx;
					height: 90rpx;
				}

				.txt {
					font-weight: 400;
					font-size: 12px;
				}
			}
		}
	}
}
</style>
